import { flexAligns } from "../settings";
import { themes } from "../engines";
import SettingCheck from "./SettingCheck";
import SettingRange from "./SettingRange";
import SettingSelect from "./SettingSelect";

const favoRanges = [
  ["width", "收藏盒子宽度", 40, 100, 0.25],
  ["size", "收藏大小", 24, 60, 1],
  ["radius", "收藏圆角", 0, 1, 0.05],
  ["columnGap", "收藏水平间隔", 2, 40, 1],
  ["rowGap", "收藏垂直间隔", 2, 40, 1],
];

const FavoSettings = () => (
  <>
    <SettingCheck area="favo" prop="newTab" desp="新窗口打开" />
    <div class="divider divider-secondary">表格布局</div>
    <SettingCheck area="favo" prop="borderStyle" desp="使用框线风格" />
    <SettingCheck area="favo" prop="showTitle" desp="显示收藏标题" />
    {favoRanges.map(([key, name, min, max, step]) => (
      <SettingRange
        key={key}
        area="favo"
        prop={key}
        desp={name}
        min={min}
        max={max}
        step={step}
        look
      />
    ))}
    <div class="divider divider-secondary">弹性布局</div>
    <SettingCheck area="favo" prop="flexBox" desp="使用弹性布局" />
    <SettingRange
      area="favo"
      prop="flexWidth"
      min={40}
      max={100}
      step={0.25}
      desp="盒子宽度"
      look
    />
    <SettingRange
      area="favo"
      prop="flexRadius"
      min={0}
      max={1}
      step={0.05}
      desp="收藏圆角"
      look
    />
    <SettingSelect
      area="favo"
      prop="flexAlign"
      desp="对齐方式"
      options={Object.values(flexAligns)}
    />
    <SettingSelect
      area="favo"
      prop="flexTheme"
      desp="收藏按钮配色"
      options={["多彩", ...Object.keys(themes)]}
    />
    <SettingSelect
      area="favo"
      prop="flexStyle"
      desp="收藏按钮风格"
      options={["饱满", "轻柔", "框线", "虚线", "隐现"]}
    />
  </>
);

export default FavoSettings;
